import React, { useState } from "react";
import { ProjectListScreen } from "./screens/project-list";
import { useAuth } from "./context/auth-context";
import { ReactComponent as SoftwareLogo } from "./assets/software-logo.svg";
import styled from "@emotion/styled";
import { ButtonNopadding, Row } from "./components/lib";
import { Dropdown, Menu } from "antd";
import { Button } from "antd/lib/radio";
import { Navigate, Route, Routes } from "react-router";
import { BrowserRouter as Router } from "react-router-dom";
import { ProjectScreen } from "./screens/project";
import { resetRoute } from "./utils";
import { ProjectModal } from "./screens/project-list/project-modal";
import { ProjectPopover } from "./components/project-popover";

// prop drilling
// 控制反转 composition component
export const AuthenticatedApp = () => {
  const [projectModelOpen, setProjectModelOpen] = useState(false);
  return (
    <Container>
      <PageHeader
        projectButton={
          <ButtonNopadding
            onClick={() => setProjectModelOpen(true)}
            type={"link"}
          >
            创建项目
          </ButtonNopadding>
        }
      />
      {/* ------单页面应用 以下都是变化的------ */}
      <Main>
        <Router>
          <Routes>
            {/* 项目列表 创建项目 */}
            <Route
              path={"/projects"}
              element={
                <ProjectListScreen
                  projectButton={
                    <ButtonNopadding
                      onClick={() => setProjectModelOpen(true)}
                      type={"link"}
                    >
                      创建项目
                    </ButtonNopadding>
                  }
                />
              }
            />
            {/* 看板 任务组 */}
            <Route
              path={"/projects/:projectId/*"}
              element={<ProjectScreen />}
            />
            {/* 重定向 */}
            <Route path={"/"} element={<Navigate to={"/projects"} />}></Route>
          </Routes>
        </Router>
      </Main>
      {/* 打开创建项目页面 */}
      <ProjectModal
        projectModalOpen={projectModelOpen}
        onClose={() => setProjectModelOpen(false)}
      />
      {/* -----单页面应用 以上都是变化的------ */}
    </Container>
  );
};

const PageHeader = (props: { projectButton: JSX.Element }) => {
  return (
    <Header between={true}>
      <HeaderLeft gap={true}>
        <ButtonNopadding type={"link"} onClick={resetRoute}>
          <SoftwareLogo width={"18rem"} color={"rgb(38,132,255)"} />
        </ButtonNopadding>
        <ProjectPopover {...props} />
        <span>用户</span>
      </HeaderLeft>
      <HeaderRight>
        <User></User>
      </HeaderRight>
    </Header>
  );
};

const User = () => {
  const { user, logout } = useAuth();
  return (
    <Dropdown
      overlay={
        <Menu>
          <Menu.Item key={"logout"}>
            <Button onClick={logout} type={"link"}>
              登出
            </Button>
          </Menu.Item>
        </Menu>
      }
    >
      <Button type={"link"} onClick={(e) => e.preventDefault()}>
        Hi,{user?.name}
      </Button>
    </Dropdown>
  );
};

const Container = styled.div`
  display: grid;
  grid-template-rows: 6rem 1fr;
  height: 100vh;
`;

const Header = styled(Row)`
  padding: 3.2rem;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  z-index: 1;
`;
const HeaderLeft = styled(Row)``;
const HeaderRight = styled.div``;
const Main = styled.main``;
